<template>
	<el-container style="padding: 20px">
		<el-header>
			<el-form>
				<el-form-item>
					<el-button size="mini" @click="defaultExecl" type="primary" icon="el-icon-folder-opened">导出信息</el-button>
					<el-upload class="upload-demo" action="/" :show-file-list="false" :limit="1" :file-list="filelist" :http-request="toUploadFile">
						<el-button size="mini" type="primary" icon="el-icon-folder">导入信息</el-button>
					</el-upload>
				</el-form-item>
				<el-form-item label="产品名称：">
					<el-input v-model="fundFullName" @input="searchClick()" size="medium"></el-input>
				</el-form-item>
			</el-form>
		</el-header>
		<el-main>
			<el-table
				:header-cell-style="{ background: '#FAFAFA' }"
				:data="tableData"
				border
				v-loading="searchLoading"
				element-loading-text="正在加载数据，请耐心等待......"
				element-loading-spinner="el-icon-loading"
				element-loading-background="rgba(0, 0, 0, 0.8)"
				style="width: 100%"
			>
				<el-table-column prop="fundCode" label="产品内部代码" width="200"> </el-table-column>
				<el-table-column prop="fundFullName" label="产品名称"> </el-table-column>
				<el-table-column prop="personLiableName" label="责任人" width="200"> </el-table-column>
				<el-table-column prop="checkLiableName" label="复核人" width="200"> </el-table-column>
				<el-table-column prop="address" label="操作" width="200">
					<template slot-scope="scope">
						<el-button type="danger" class="delebtn" icon="el-icon-edit" size="mini" @click="add('修改', scope.row)">修改</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				background
				:disabled="searchLoading"
				:page-size="paging.size"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
				:current-page="paging.num"
				:page-sizes="paging.sizes"
				layout="sizes,prev,pager,next,jumper,total"
				:total="paging.total"
			/>
		</el-main>
		<managerInfo :title="title" :addComShow="addComShow" @comIsShow="comIsShow" @queryFundManagerList="getData" ref="managerInfo" />
	</el-container>
</template>
<script>
	import { getProductManagerList, exportFund, importFund } from '@/api/productApi/admiSystem'
	import managerInfo from './components/index'
	import { uploadFileAndSort } from '@/api/productApi/file'
	import { downloadFile } from '@/api/productApi/file'
	import { debounce } from '@/utils/debounceFunc'
	import { SpecialReplace } from '@/utils/characters'
	import { Loading } from 'element-ui'
	export default {
		name: 'Fund',
		components: {
			managerInfo
		},
		data() {
			return {
				title: '修改',
				addComShow: false,
				tableData: [],
				fundFullName: '',
				// 分页配置
				paging: {
					// 显示的条目数
					size: 10,
					// 当前页数
					num: 1,
					total: 0,
					pages: 0,
					sizes: [10, 20, 50, 100]
				},
				filelist: [],
				searchLoading: false,
				loadingOptions: {
					text: '正在导入数据，请耐心等待......',
					background: 'rgba(0, 0, 0, 0.8)',
					spinner: 'el-icon-loading'
				},
				cacheData: [] // 缓存最新输入的值
			}
		},
		mounted() {
			this.getData()
		},
		methods: {
			// 搜索
			searchClick: debounce(function() {
				this.paging.num = 1
				this.cacheData = [this.fundFullName]
				if (!this.searchLoading) {
					this.getData()
				}
			}, 1),

			// 改变页数
			handleCurrentChange: function(val) {
				this.paging.num = val
				this.getData()
			},
			// 改变条数
			handleSizeChange: function(val) {
				this.paging.num = 1
				this.paging.size = val
				this.getData()
			},
			// 导入
			toUploadFile(params) {
				uploadFileAndSort(params).then(res => {
					if (res.msgCode === 'Y') {
						Loading.service(this.loadingOptions)
						importFund({ fileId: res.obj })
							.then(res => {
								if (res.msgCode === 'Y') {
									this.$message({
										showClose: true,
										message: res.msg,
										customClass: 'el-messageClass',
										type: 'success'
									})
									this.filelist = []
									this.getData()
								}
							})
							.finally(() => {
								const loadingInstance = Loading.service(this.loadingOptions)
								loadingInstance.close()
							})
					}
				})
			},
			// 导出
			defaultExecl() {
				exportFund({ fundFullName: this.fundFullName }).then(res => {
					if (res.msgCode === 'Y') {
						const file = {
							fid: res.data.body
						}
						downloadFile(file).then(item => {
							if (!!item && item.msgCode !== 'N') {
								this.$message({
									showClose: true,
									message: '正在打开，请稍等......',
									customClass: 'el-messageClass',
									type: 'success'
								})
								window.open(`/update/download.do?fid=${res.data.body}`)
							} else {
								this.$message({
									showClose: true,
									message: '文件不存在',
									customClass: 'el-messageClass',
									type: 'error'
								})
							}
						})
					}
				})
			},
			getData: debounce(function() {
				if (SpecialReplace(this.fundFullName, false)) {
					return
				}
				this.searchLoading = true
				this.cacheData = []
				getProductManagerList({ fundFullName: this.fundFullName }, this.paging)
					.then(res => {
						if (res.msgCode === 'Y') {
							this.paging.total = res.data.page.total
							this.tableData = res.data.body
						}
					})
					.finally(() => {
						if (!this.cacheData.length) {
							this.searchLoading = false
						}
						if (this.cacheData.length && this.searchLoading) {
							this.getData()
						}
					})
			}, 10),
			comIsShow() {
				this.addComShow = !this.addComShow
			},
			add(title, item) {
				if (title === '新增' || title === '修改') {
					this.$refs.managerInfo.edit(JSON.stringify(item))
					this.comIsShow()
				} else if (title === '删除') {
					this.operatorComfirm(() => {}, '删除该任务')
				}
			}
		}
	}
</script>
<style lang="scss" scoped src='./index.scss'>
</style>
